<template>
    <view class="flex-col homepage">
        <view class="flex-row wrapper-two" v-for="(j,index) in ActivityList" :key="index" @click="go(j)">
            <view class="wraper-col"></view>
            <view class="flex-row wraper-col-two">
                <view class="flex-col flex-row box-two">
                    <view class="u-line-1 text-three">{{j.theTheme}}</view>
                    <u-tag class="tag-two" text="非常紧急" type="error" size="mini" v-if="j.type=='1'"></u-tag>
					<u-tag text="紧急" size="mini" v-if="j.type=='2'"></u-tag>
					<u-tag text="一般" type="success" size="mini" v-if="j.type=='3'"></u-tag>
                </view>
                <view class="box-three" v-if="j.type=='1'"></view>
                <view class="u-line-1 text-four">物业服务中心 2020/10/10</view>
            </view>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
				ActivityList:{}
			}
        },
		onLoad(){
			this.All()
		},
        methods: {
			go(j){
				uni.navigateTo({
					url: '/pages/gwb/tz?j=' + JSON.stringify(j)
				})
			},
			All(){
				this.$axios({
					url: 'serverwg/gwb/All',
					data: {
						id: 1,
					},
					method: 'GET',
					success: (res) => {
						this.ActivityList = res.data.data.CommunityList1
					}
				})
			}
        }
    }
</script>
<style lang="scss" scoped>
    /** 全局样式-开始,建议放在公共css样式文件中,比如common.css 或app.vue文件 */

    html,
    body {
        margin: 0;
        width: 100%;
        height: 100%;
        font-size: 16px
    }

    view,
    text,
    image {
        position: relative;
        box-sizing: border-box;
        flex-shrink: 0;
    }

    .flex-col {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
    }

    .flex-row {
        display: flex;
        align-items: flex-start;
    }

    .flex-col .flex-row {
        width: 100%
    }

    /** 全局样式-结束*/

    .homepage {
        height: 1334rpx;
        padding: 54rpx 0rpx 0rpx 35rpx;

        .wrapper {
            width: 680rpx;
            justify-content: space-between;
            margin: 0rpx 0rpx 36rpx 4rpx;
            padding: 30rpx 21rpx 28rpx 23rpx;
            border-width: 2rpx;
            border-style: solid;
            border-color: rgba(226, 226, 226, 1);

            .wraper-col {
                width: 220rpx;
                height: 156rpx;
                background: rgba(220, 220, 220, 1);
            }

            .wraper-col-two {
                width: 400rpx;
                height: 154rpx;
                justify-content: space-between;
                margin-top: 4rpx;
                padding: 3rpx 20rpx 0rpx 10rpx;

                .box {
                    width: 370rpx;
                    justify-content: space-between;
                    margin-bottom: 16rpx;

                    .text {
                        width: 182rpx;
                        font-size: 30rpx;
                        font-weight: 600;
                        color: rgba(143, 143, 143, 1);
                    }

                    .box-col {
                        width: 14rpx;
                        height: 12rpx;
                        margin-top: 10rpx;
                        border-radius: 100rpx;
                        background: rgba(255, 18, 18, 1);
                    }
                }

                .tag {
                    background: rgba(255, 187, 187, 1);
                    color: rgba(249, 35, 35, 1);
                }

                .text-two {
                    bottom: 0rpx;
                    left: 10rpx;
                    position: absolute;
                    font-weight: 600;
                    color: rgba(176, 176, 176, 1);
                }
            }
        }

        .wrapper-two {
            width: 680rpx;
            justify-content: space-between;
            margin-bottom: 24rpx;
            padding: 30rpx 21rpx 28rpx 23rpx;
            border-width: 2rpx;
            border-style: solid;
            border-color: rgba(226, 226, 226, 1);

            .wraper-col {
                width: 220rpx;
                height: 156rpx;
                background: rgba(220, 220, 220, 1);
            }

            .wraper-col-two {
                width: 400rpx;
                height: 154rpx;
                justify-content: space-between;
                margin-top: 4rpx;
                padding: 3rpx 20rpx 0rpx 10rpx;

                .box-two {
                    width: 182rpx;

                    .text-three {
                        width: 100%;
                        margin-bottom: 14rpx;
                        font-size: 30rpx;
                        font-weight: 600;
                        color: rgba(143, 143, 143, 1);
                    }

                    .tag-two {
                        margin: 1rpx 0rpx 0rpx 8rpx;
                        background: rgba(255, 187, 187, 1);
                        color: rgba(249, 35, 35, 1);
                    }
                }

                .box-three {
                    width: 14rpx;
                    height: 12rpx;
                    margin-top: 10rpx;
                    border-radius: 100rpx;
                    background: rgba(255, 18, 18, 1);
                }

                .text-four {
                    bottom: 0rpx;
                    left: 10rpx;
                    position: absolute;
                    font-weight: 600;
                    color: rgba(176, 176, 176, 1);
                }
            }
        }

        .wrapper-three {
            width: 680rpx;
            justify-content: space-between;
            padding: 30rpx 25rpx 28rpx 23rpx;
            border-width: 2rpx;
            border-style: solid;
            border-color: rgba(226, 226, 226, 1);

            .wraper-col {
                width: 220rpx;
                height: 156rpx;
                background: rgba(220, 220, 220, 1);
            }

            .wraper-col-two {
                width: 400rpx;
                height: 154rpx;
                justify-content: space-between;
                margin-top: 4rpx;
                padding: 3rpx 20rpx 0rpx 10rpx;

                .box-four {
                    width: 182rpx;

                    .text-five {
                        width: 100%;
                        margin-bottom: 16rpx;
                        font-size: 30rpx;
                        font-weight: 600;
                        color: rgba(143, 143, 143, 1);
                    }

                    .tag {
                        background: rgba(255, 187, 187, 1);
                        color: rgba(249, 35, 35, 1);
                    }
                }

                .box-five {
                    width: 14rpx;
                    height: 12rpx;
                    margin-top: 10rpx;
                    border-radius: 100rpx;
                    background: rgba(255, 18, 18, 1);
                }

                .text-six {
                    bottom: 0rpx;
                    left: 10rpx;
                    position: absolute;
                    font-weight: 600;
                    color: rgba(176, 176, 176, 1);
                }
            }
        }
    }
</style>